<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>javascript DOM编程艺术 案例</title>
</head>
<body>
<ul>
    <li><a href="img/wx.png" onclick="showPic(this);return false;" title="wx">wx</a></li>
    <li><a href="img/wx1.png" onclick="showPic(this);return false;" title="wx1">wx1</a></li>
    <li><a href="img/zf.png" onclick="showPic(this);return false;" title="zf">zf</a></li>
    <li><a href="img/qh.png" onclick="showPic(this);return false;" title="qh">qh</a></li>
</ul>

<img id="placeholder" src="img/wx.png" alt=""/>
<p id="para">choose a picture</p>
<script>
    function showPic(whichPic)
    {
        var source = whichPic.getAttribute('href');
        var placeholder = document.getElementById('placeholder');
        placeholder.setAttribute("src",source);

        var text = whichPic.getAttribute('title');
        var para = document.getElementById('para');
        para.firstChild.nodeValue = text;
    }
</script>
</body>
</html>